<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background-color: aliceblue;
        }

        a {
            text-decoration: none;
            color: aqua;
        }

        .container {
            background-color: white;
            top: 10%;
            width: 700px;
            height: 500px;
            position: absolute;
            left: 25%;
            text-align: center;
            box-shadow: 0 0 5px black;
        }

        .container>div>div>form>div>input {
            /* border-radius: 25px/50px; */
            width: 250px;
            height: 40px;
            margin-left: 350px;
            margin-top: 0px;
            outline-color: aqua;
            border: 1px gray solid;
        }

        .container>div>div>form>div>button {
            margin-top: 0px;
            width: 110px;
            height: 30px;
            margin-left: 0px;
            cursor: pointer;
            /* background: linear-gradient(to right, rgb(0, 149, 255), rgb(91, 76, 151)); */
            border-radius: 10px;
            border: none;
            opacity: 0.8;
        }

        .qr {
            top: 10%;
            right: 80%;
            position: absolute;
            width: 100px;
            height: 100px;

        }
    </style>
</head>

<body>
    <!-- 整个页面框架 -->
    <div class="container">
        <!-- 登录盒子框架 -->
        <div>
            <!-- 登录内容填写盒子 -->
            <div>
                <form
                    style="display: flex;justify-content: flex-start;flex-direction: column; align-items: flex-start; margin-top: 40px;">
                    <h3 style="margin-left: 350px;">用户注册</h3>

                    <div>
                        <input id="accountNumber" type="text" id="loginUsername" placeholder="账号" minlength="6"
                            maxlength="8" required>
                    </div>

                    <div>
                        <input id="passWord" type="password" id="loginPassword" placeholder="密码" minlength="6"
                            maxlength="8" required>
                    </div>
                    <div
                        style="display: flex;margin-left: 350px; justify-content: space-around ;width: 256px;margin-top: 30px;">

                        <button type="button" style="background-color:aqua;border:none " id="zhuche">注册</button>
                    </div>

                </form>
                <div class="qr">
                    <img src="image/汉中人寿二维码.gif" alt="">
                </div>
                <!-- 注册 -->
                <div>
                    <!-- 底部登录即.... -->
                    <p style=" color: aqua;margin-top: 50px;">
                        <input type="checkbox">
                        登录即表示同意平台<a href="" target="_blank">《隐私政策》</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script>
        let accountNumber = document.getElementById("accountNumber")
        let passWord = document.getElementById("passWord")
        document.getElementById("zhuche").onclick = function () {
            if (accountNumber.value == "" && passWord.value == "") {
                alert("请输入用户信息")

            } else if (accountNumber.value != "" && passWord.value != "") {
                localStorage.setItem("passWord", passWord.value)
                localStorage.setItem("accountNumber", accountNumber.value)
                alert("注册成功")
                window.location.href = "仿billbill网站.html"
            } else {
                alert(accountNumber.value == "" ? "请输入账号" : "请输入密码")
            }
        }
    </script>
</body>

</html>